<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<view class="relative">
			<view style="z-index:0;position:absolute;left:-17px;right:-17px;top:-17px;bottom:-17px;height:240px;">
				<image class="w-full h-full" mode="aspectFill" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg_point_header.png"></image>
			</view>
			<uni-nav-bar ref="navBar" fixed statusBar title="积分明细" :border="false" backgroundColor="transparent" @clickLeft="goBack">
				<template v-slot:left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
			</uni-nav-bar>
			<view class="px-16" style="position:absolute;top:100px;width:100%;">
				<view class="flex item-center justify-between fs-14 c3">
					<view class="flex item-center">
						<image :src="detail.avatar" class="img-avatar mr-4"></image>
						<view>{{detail.nickName}}</view>
					</view>
					<view v-if="!queryParams.businessId" class="flex item-center text-color-hint fs-12" @click="showPop(true)">
						<view>调整积分</view>
						<image class="w-16 h-17 ml-4" src="@/static/svg/icon-arrow-right.svg"></image>
					</view>
				</view>
				<view class="mt-20 color-primary fs-32">
					<view class="font-bold">{{detail.remainPoint}}</view>
					<view class="fs-12 c3">当前积分</view>
				</view>
			</view>
			<view class="bg-default" style="position:absolute;top:220px;width:100%;">
				<view class="mx-16 flex-col">
					<view class="flex-col">
						<view class="h-1 bg-default flex-shrink"></view>
						<view class="flex h-47 fs-16">
							<view class="flex-1 flex center" @click="onTabClick('')">
								<text
									class="h-full"
									:class="queryParams.incomeType ? 'text-color-hint' : 'color-primary font-semibold'"
									style="line-height:47px;"
									:style="queryParams.incomeType ? '' : 'border-bottom:2px solid #FA4543;'"
								>全部</text>
							</view>
							<view class="flex-1 flex center" @click="onTabClick(1)">
								<text
									class="h-full"
									:class="queryParams.incomeType===1?'color-primary font-semibold':'text-color-hint'"
									style="line-height:47px;"
									:style="queryParams.incomeType===1?'border-bottom:2px solid #FA4543;':''"
								>收入</text>
							</view>
							<view class="flex-1 flex center" @click="onTabClick(2)">
								<text
									class="h-full"
									:class="queryParams.incomeType===2?'color-primary font-semibold':'text-color-hint'"
									style="line-height:47px;"
									:style="queryParams.incomeType===2?'border-bottom:2px solid #FA4543;':''"
								>支出</text>
							</view>
						</view>
						<view class="h-1 bg-default flex-shrink"></view>
						<view v-if="dataList && dataList.length">
							<template v-for="(item,i) in dataList" :key="i">
								<view class="flex justify-between item-center radius-12 bg-white px-16 py-8 mt-16 flex-shrink">
									<view class="flex item-center">
										<image :src="item.productPic || 'https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/icon-point.svg'" mode="" class="img-product mr-8"></image>
										<view class="flex-col justify-between c3 fs-12">
											<view class="fs-16 font-bold text-hide">{{item.title}}</view>
											<view class="color-secondary-warning">{{ pointsTypeList[item.pointsType] }}</view>
											<view class="text-color-hint">发放时间：{{item.createTime}}</view>
										</view>
									</view>
									<view :class="item.incomeType === 1 ? 'color-primary' : 'c3'" class="font-bold fs-14">
										{{item.points > 0 ? '+' + item.points : item.points}}
									</view>
								</view>
							</template>
						</view>
						<view v-else class="py-50 bg-default">
							<view v-if="!loading" class="flex-col center h-full">
								<text class="mt-4 fs-12 text-color-regular font-normal text-center">暂无数据</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template #bottom>
			<view :style="`height:${safeAreaBottom}px;`"></view>
		</template>
	</z-paging>
	<uni-popup :is-mask-click="false" ref="popup" type="center">
		<view>
			<view class="w-pop" style="background: #ffffff;">
				<view class="base-title">调整积分</view>
				<view class="item-box">
					<view class="type flex item-center">
						<view class="type-item px-8 py-4" :class="type === 1 ? 'active' : ''" style="border-radius: 4px 0px 0px 4px;" @click="type=1">增加</view>
						<view class="type-item px-8 py-4" :class="type === 2 ? 'active' : ''" style="border-radius: 0px 4px 4px 0px;" @click="type=2">扣除</view>
					</view>
					<view class="flex item-center">
						<input type="number" placeholder="请输入" class="inp-box" v-model="points" @blur="changePoint">积分
					</view>
				</view>
				<view class="item-box fs-14 font-bold">
					<view class="label-box">当前剩余</view>
					<view>{{ detail.remainPoint }}</view>
				</view>
				<view class="item-box fs-14 font-bold">
					<view class="label-box">调整后剩余</view>
					<view>{{ type===2 ? (detail.remainPoint - Number(points)) : (detail.remainPoint + Number(points)) }}</view>
				</view>
				<view class="flex item-center btn-box">
					<view class="cancal-btn" @click="showPop(false)">取消</view>
					<view class="submit-btn" @click="submit">确定</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import {computed,ref,unref,watch} from 'vue'
	import { pageUserPointsDetailApi, businessChangePointsApi, userPointsAccountApi } from '@/pagesJ/api/index.js'
	
	const navBar = ref(null)
	const showAll = ref(false)
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets && uni.getSystemInfoSync().safeAreaInsets.bottom || 0
	})
	//积分类型：1策划人调整积分 2消费积分 3转发积分 4订阅积分 5分销积分 6积分兑换 7积分订单退款
	const pointsTypeList = ['', '策划人调整积分', '消费积分', '转发积分', '订阅积分', '分销积分', '积分兑换', '积分订单退款']
	const goBack = () => {
		uni.navigateBack()
	}

	const onTabClick = (val) => {
		queryParams.value.incomeType = val
		onSearch()
	}
	
	const queryParams = ref({
		businessId: '',
		incomeType: '',
		userId: '',
		pageNum: 1,
		pageSize: 10
	})
	const paging = ref(null)
	const dataList = ref([])
	const loading = ref(true)
	const queryList = (pageNo, pageSize) => {
		loading.value = true
		queryParams.value.pageNum = pageNo
		pageUserPointsDetailApi(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		}).finally(() => {
			loading.value = false
		})
	}
	
	const onSearch = () => {
		loading.value = true
		queryParams.value.pageNum = 1
		paging.value.reload()
	}
	const type = ref(1)
	const points = ref('')
	const popup = ref()
	const detail = ref({})
	const isNumber = (val) => {
	    var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
	    if(regPos.test(val) ){
	        return true;
	    }else{
	        return false;
	    }
	}
	const changePoint = (e) => {
		if(!isNumber(e.detail.value)){
			uni.showToast({
				icon: 'none',
				title: '只能输入数字'
			})
			points.value = ''
		}
	}
	const showPop = async (value, data) => {
		if (value) {
			popup.value && popup.value.open('center')
		} else {
			popup.value && popup.value.close()
		}
	}
	const submit = async () => {
		if (!points.value) {
			uni.showToast({
				icon: 'none',
				title: '请填写积分'
			})
			return
		}
		let data = {
			userId: queryParams.value.userId,
			points: type.value === 2 ? (-Math.abs(points.value)) : points.value
		}
		businessChangePointsApi(data).then(res => {
			uni.showToast({
				icon: 'none',
				title: '保存成功'
			})
			points.value = ''
			showPop()
			onSearch()
			getDetail()
		})
	}
	const getDetail = () => {
		userPointsAccountApi({userId: queryParams.value.userId, businessId: queryParams.value.businessId}).then(res => {
			detail.value = res
		})
	}
	onLoad((query) => {
		queryParams.value.userId = query.id
		queryParams.value.businessId = query.businessId || ''
		getDetail()
	})
</script>
<style scoped lang="scss">
	.img-avatar{
		width: 24px;
		height: 24px;
		border-radius: 50%;
	}
	.img-product{
		width: 62px;
		height: 62px;
		border-radius: 16px;
	}
	.type{
		font-size: 12px;
		.type-item{
			color: #00AEFF;
			background: #fff;
			border: 1px solid #00AEFF;
			&.active{
				color: #fff;
				background: #00AEFF;
			}
		}
	}
	.three-lines-ellipsis {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	.info-text{
		align-items: flex-end;
	}
	.text-hide{
		width: 200px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.pick {
		font-size: 40px;
		color: rgba(51, 51, 51, .61);
	}
	
	.w-pop {
		background: #fffff;
		border-radius: 8px;
		padding: 20px 0px 0 0px;
		width: 280px;
	}
	
	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
		text-align: center;
	}
	
	.item-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 20px;
	}
	
	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}
	
	.inp-box {
		background: rgba(245, 245, 245, 1);
		height: 32px;
		border-radius: 12px;
		padding: 0 10px;
		line-height: 32px;
		border: 1px solid rgba(245, 245, 245, 1);
		width: 100px;
		&.unactive {
			border-color: #FA4543;
		}
	}
	
	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 40px;
	}
	
	.cancal-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}
	
	.submit-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(250, 69, 67, 1);
	}
</style>